<template>
  <MyNumber :count="count" @update:count="fn" />
  <!-- 等价于 -->
  <MyNumber :count="count" @update:count="fn($event)" />
  <!-- 在原生事件中 $event 表示事件对象 -->
  <!-- 💥注意：在自定义事件中 $event 表示子传父的数据 -->
  <MyNumber :count="count" @update:count="count = $event" />
  <!-- Vue2 中的 :count.sync   其实就是注册了自定义事件  @update:count="count = $event" -->
  <!-- Vue3 中的 v-model:count 其实就是注册了自定义事件  @update:count="count = $event" -->
  <!-- 🔔🔔 总结：在Vue3中  v-model:count 其实就是  Vue2 的  :count.sync  -->
  <MyNumber v-model:count="count" />

  <h1>第二个组件</h1>
  <!-- 🔔推荐写法 -->
  <MyNumberNew v-model="count2" />
  <!-- 其实就是以下代码的简写 -->
  <MyNumberNew v-model:modelValue="count2" />
  <!-- 还等价于 -->
  <MyNumberNew :modelValue="count2" @update:modelValue="count2 = $event" />
</template>

<script>
import { ref } from 'vue'
import MyNumber from './components/MyNumber.vue'
import MyNumberNew from './components/MyNumberNew.vue'
export default {
  components: { MyNumber, MyNumberNew },
  setup () {
    const count = ref(10)
    const fn = (val) => {
      console.log('自定义事件的$event', val)
      count.value = val
    }

    const count2 = ref(11)
    return { count, fn, count2 }
  }
}
</script>
